<template>
	<view class="bag_bg whe_maxv wz_he">
    <view class="pad_20 boxs">
      <view class="ba_white bor_10 xyy pad_20 boxs">
        <view class="em">已连续签到{{ list.continuous }}天</view>
        <view class="pad_10_0">
          <view class="wz_jz em wh_f">
            <view v-if="false" class="czjz_flex">
              <up-icon @click="updaDate(-1)" name="arrow-left"></up-icon>
            </view>
            <view class="flex_1">
              <text>{{ dadyTime }}</text>
              <view>{{currentDate}}</view>
            </view>
            <view v-if="false" class="czjz_flex">
              <up-icon @click="updaDate(1)" name="arrow-right"></up-icon>
            </view>
          </view>
          <view class="wh_sp fz_12 pad_10_0 wz_jz">
            <view>周一</view>
            <view>周二</view>
            <view>周三</view>
            <view>周四</view>
            <view>周五</view>
            <view>周六</view>
            <view>周日</view>
          </view>
          <view class="wh_sp_7 hh">
            <view v-for="(item,index) of dataIndex"></view>
            <view v-for="(item,index) in list.sign_board" :key="index">
              <view class="bor_10 boxs"
                    style="height: 42px;color: #00b26a">
                <view @click="doSign(item.date)" v-if="item.is_repair === 0 && item.date<=dadyTime"
                      class="whe_max jz_flex bor_10 boxs" style="border: 1px solid #00b26a;">
                  补</view>
                <view v-if="item.is_repair === 1 && item.date<=dadyTime"
                      class="whe_max jz_flex qd_rq">
                  <img style="width: 16px;height: 16px" src="../../static/icon/gou.png" alt="">
                </view>
                <view v-if="item.is_repair === 2 && item.date<=dadyTime"
                      class="whe_max jz_flex qd_rq">
                  <img style="width: 16px;height: 16px" src="../../static/icon/gou.png" alt="">
                </view>
                <view v-if="item.date>dadyTime" class="whe_max qd_wrq jz_flex">签</view>
              </view>
              <view class="fz_10" style="padding: 5px 0 10px">
                {{ String(item.date).split('-')[1] }}.{{ String(item.date).split('-')[2] }}
              </view>
            </view>
          </view>
        </view>
        <view class="bor_20 wz_white pad_10_0 wz_jz" style="background-color: #00b26a">
          已签到
        </view>
      </view>
    </view>


    <up-toast ref="uToastRef"></up-toast>
  </view>
</template>

<script>
import {doSign, signList} from "../../Api/shop";

  export default {
		data() {
			return {
        list:[],
        dadyTime:"",
        dataIndex:0,
        currentDate: null, // 用来存储当前操作的日期
			}
		},
    onShow(){
      this.doSign()
      this.getList()
      this.getDate()
    },
		mounted() {

		},
		methods: {
      updaDate(delta){
        // 1. 拆分当前年月
        const [yearStr, monthStr] = this.dadyTime.split('-');
        let year = parseInt(yearStr);
        let month = parseInt(monthStr);
        // 2. 计算新月份（0-11的月份索引）
        let date = new Date(year, month - 1 + delta, 1);
        // 3. 获取新日期信息
        const newYear = date.getFullYear();
        const newMonth = date.getMonth() + 1; // 转回1-12的月份
        // 4. 格式化为YYYY-MM
        this.dadyTime = `${newYear}-${String(newMonth).padStart(2, '0')}`;
        signList({
          month:this.dadyTime
        }).then(res=>{
          this.list = res.data
          console.log('签到列表',this.list)
          this.getWeek(res.data.sign_board[0].date)
        })
        },
      getDate(){
        // 获取当前日期
        const today = new Date();
        // 格式化为 "YYYY-MM-DD"
        this.dadyTime = today.toISOString().split('T')[0];
      },
      getWeek(dateString){
        // 将字符串转换为 Date 对象
        const date = new Date(dateString);
        // 获取星期几（0-6）
        const dayIndex = date.getDay();
        // 星期几的名称映射
        const daysOfWeek = ["日", "一", "二", "三", "四", "五", "六"];
        let dateList = [ "一", "二", "三", "四", "五", "六","日"]
        // 使用 indexOf 找到这个名称在 dateList 中的下标
        this.dataIndex = dateList.indexOf(daysOfWeek[dayIndex]);

        console.log(9999,daysOfWeek[dayIndex])
        console.log(9999111,this.dataIndex)

        // 返回星期几的名称
        return daysOfWeek[dayIndex]
      },
      getList(){
        signList().then(res=>{
          this.list = res.data
          console.log('签到列表',this.list)
          this.getWeek(res.data.sign_board[0].date)
        })
      },
      //消息提示
      showToast(msg, type = "default") {
        uni.showToast({
          title: msg,
          icon: "none", // 图标类型，可选值：success, none
          duration: 2000 // 显示时间，单位毫秒
        });
        // this.$refs.uToastRef.show({
        //   type,
        //   message: msg
        // });
      },
      doSign(e){
        doSign({date:e}).then(res=>{
          if(res.success&&e){
            this.showToast('补签成功!')
          }else if(res.success){
            this.showToast('签到成功!')
          }
          this.getList()
          console.log('签到结果')
        })
      }

		}
	}
</script>

<style scoped lang="scss">
.wz_he{
  color: #5f5437;
}
.qd_rq{
  background-color: #00b26a;
  border-radius: 10px;
  color: white;
}
.qd_wrq{
  background-color: #9debb4;
  border-radius: 10px;
  color: white;
}
.wh_sp{
  display: flex;
}
.wh_sp>view{
  flex: 1;
}
.wh_sp_7>view{
  text-align: center;
  width: 14.28%;
  display: inline-block;
  padding: 2px;
  box-sizing: border-box;
}
</style>
